<template>
  <div>
    <div ref="myPage" class="my-graph" style="height:calc(100vh);" :class="['my-line-style-' + lineStyle]">
      <RelationGraph ref="graphRef" :options="graphOptions">
        <template #node="{node}">
          <div class="c-round" style="width: 70px;height:70px;">
              <CircumIcon color="#ffffff" size="70px" :name="node.data.icon"/>
          </div>
        </template>
        <template #graph-plug>
          <div class="c-my-panel">
            <div class="c-option-name">
              Line style when selected:
            </div>
            <el-radio-group v-model="lineStyle" size="small" @change="setLineStyle">
              <el-radio-button label="">Default</el-radio-button>
              <el-radio-button label="1">Style 1</el-radio-button>
              <el-radio-button label="2">Style 2</el-radio-button>
              <el-radio-button label="3">Style 3</el-radio-button>
              <el-radio-button label="4">Style 4</el-radio-button>
            </el-radio-group>
          </div>
        </template>
      </RelationGraph>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import RelationGraph, { RGJsonData, RGOptions, RGNode, RGLine, RGLink, RGUserEvent, RelationGraphComponent } from 'relation-graph-vue3';
import CircumIcon from "@klarr-agency/circum-icons-vue"; // Vue

const lineStyle = ref('');
const graphOptions: RGOptions = {
    allowSwitchLineShape: true,
    allowSwitchJunctionPoint: true,
    defaultLineColor: 'rgba(255, 255, 255, 0.6)',
    defaultNodeColor: 'transparent',
    defaultNodeBorderWidth: 0,
    defaultNodeBorderColor: 'transparent',
    defaultNodeFontColor: '#ffffff',
    defaultNodeShape: 0,
    toolBarDirection: 'h',
    toolBarPositionH: 'right',
    toolBarPositionV: 'bottom',
    defaultPolyLineRadius: 10,
    defaultLineShape: 6,
    defaultJunctionPoint: 'lr',
    disableNodeClickEffect: true,
    lineUseTextPath: true,
    layout: {
        layoutName: 'tree',
        from: 'left',
        'min_per_width': 310,
        'min_per_height': 70,
    }
};

const graphRef = ref<RelationGraphComponent>();

onMounted(() => {
    showGraph();
});

const showGraph = async() => {
    const __graph_json_data: RGJsonData = {
        rootId: 'a',
        nodes: [
            { id: 'a', text: 'a', data: { icon: 'align_bottom' } },
            { id: 'b', text: 'b', data: { icon: 'basketball' } },
            { id: 'b1', text: 'b1', data: { icon: 'bowl_noodles' } },
            { id: 'b2', text: 'b2', data: { icon: 'delivery_truck' } },
            { id: 'b2-1', text: 'b2-1', data: { icon: 'fries' } },
            { id: 'b2-2', text: 'b2-2', data: { icon: 'microchip' } },
            { id: 'c', text: 'c', data: { icon: 'satellite_1' } },
            { id: 'c1', text: 'c1', data: { icon: 'brightness_up' } },
            { id: 'c2', text: 'c2', data: { icon: 'burger' } },
            { id: 'c3', text: 'c3', data: { icon: 'cloud_drizzle' } }
        ],
        lines: [
            { from: 'a', to: 'b', text: 'Relation description' },
            { from: 'b', to: 'b1', text: 'Relation description' },
            { from: 'b', to: 'b2', text: 'Relation description' },
            { from: 'b2', to: 'b2-1', text: 'Relation description' },
            { from: 'b2', to: 'b2-2', text: 'Relation description' },
            { from: 'a', to: 'c', text: 'Relation description' },
            { from: 'c', to: 'c1', text: 'Relation description' },
            { from: 'c', to: 'c2', text: 'Relation description' },
            { from: 'c', to: 'c3', text: 'Relation description' }
        ]
    };
    const graphInstance = graphRef.value?.getInstance();
    if (graphInstance) {
        await graphInstance.setJsonData(__graph_json_data);
        await graphInstance.moveToCenter();
        await graphInstance.zoomToFit();
    }
};

const setLineStyle = () => {};
</script>

<style lang="scss" scoped>

.my-graph {
    background: linear-gradient(to right, rgb(16, 185, 129), rgb(101, 163, 13));
}
//修改图谱默认样式
::v-deep(.relation-graph) {

    .rel-node-shape-0 {
        display: flex;
        place-items: center;
        justify-content: center;
    }
    .rel-map {
        background: none !important;
        .rel-node-shape-1 {
        }
    }
    .rel-toolbar {
        color: #ffffff;
        .c-current-zoom {
            color: #ffffff;
        }
    }
    .rel-node-flashing {
        animation: none;
    }
    .c-rg-line-checked-bg {
        stroke: rgba(255, 255, 255, 0.2);
    }
    .c-rg-line-text-checked {
        stroke: rgba(255, 255, 255, 0.2);
    }
}

</style>

<style lang="scss">

// 通过全局样式 修改图谱内部使用到的 自定义样式
.my-line-style-1{
    .c-rg-line-checked {
        animation: my-line-anm1 2s linear infinite;
    }
}
.my-line-style-2{
    .c-rg-line-checked {
        animation: my-line-anm2 1s infinite;
    }
}
.my-line-style-3{
    .c-rg-line-checked {
        animation: my-line-anm3 1s infinite;
    }
}
.my-line-style-4{
    .c-rg-line-checked {
        animation: my-line-anm4 1s infinite;
    }
}

@keyframes my-line-anm1 {
    0% {
        stroke-dashoffset: 100px;
        stroke-dasharray: 5, 5, 5;
    }
    100% {
        stroke-dasharray: 5, 5, 5;
        stroke-dashoffset: 3px;
    }
}
@keyframes my-line-anm2 {
    from {
        stroke-dashoffset: 0;
        stroke-dasharray: 4,4,4;
    }
    to {
        stroke-dashoffset: 10px;
        stroke-dasharray: 20,20,20;
    }
}
@keyframes my-line-anm3 {
    0% { stroke-opacity: 1; }
    50% { stroke-opacity: 0.2; }
    100% { stroke-opacity: 1; }
}
@keyframes my-line-anm4 {
    0%{
        stroke-dasharray:0,100%;
    }
    100%{
        stroke-dasharray:100%,0;
    }
}
</style>
<style scoped lang="scss">

.c-my-panel {
    width: 350px;
    position: absolute;
    left: 10px;
    top: 10px;
    border-radius: 10px;
    z-index: 800;
    padding: 10px;
    background-color: #efefef;
    border: #eeeeee solid 1px;
    overflow: hidden;

    .c-option-name {
        color: #666666;
        font-size: 14px;
        line-height: 40px;
    }
}
</style>
